iT邦幫忙

2024 iThome 鐵人賽

DAY 15
0
Modern Web

asp.net core 分層架構快速上手系列 第 16

Day15 新增產品頁面(INDEX)

  • 分享至 

  • xImage
  •  

因為過節,產品頁面分三天寫;
後續依狀況會回頭整併在一起。

  • 修改Repository
 public Repository(ApplicationDbContext db)
        {
            _db = db;
            this.dbSet = _db.Set<T>();
            _db.Products.Include(u => u.Category).Include(u => u.CategoryId);
        }
 public T Get(Expression<Func<T, bool>> filter, string? includeProperties = null)
        {
            IQueryable<T> query = dbSet;
            query = query.Where(filter);
            if (!string.IsNullOrEmpty(includeProperties))
            {
                foreach (var includeProp in includeProperties.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries))
                {
                    query = query.Include(includeProp);
                }
            }
            return query.FirstOrDefault();
        }
 public IEnumerable<T> GetAll(Expression<Func<T, bool>>? filter, string? includeProperties = null)
        {
            IQueryable<T> query = dbSet;
            if (filter != null)
            {
                query = query.Where(filter);
            }
            if (!string.IsNullOrEmpty(includeProperties))
            {
                foreach (var includeProp in includeProperties.Split(new char[] { ',' }, StringSplitOptions.RemoveEmptyEntries))
                {
                    query = query.Include(includeProp);
                }
            }
            return query.ToList();
        }

https://ithelp.ithome.com.tw/upload/images/20240917/201474387vKE5ZvQjW.png
https://ithelp.ithome.com.tw/upload/images/20240917/20147438dZf8gcTFzr.png
https://ithelp.ithome.com.tw/upload/images/20240917/20147438lm1Vabxp0n.png

  • 修改IRpeository
IEnumerable<T> GetAll(Expression<Func<T, bool>>? filter = null, string? includeProperties = null);
T Get(Expression<Func<T, bool>> filter, string? includeProperties = null);

https://ithelp.ithome.com.tw/upload/images/20240917/201474386XvvAbrdv7.png

  • 修改UnitOfWork
    IUnitOfWork與UnitOfWork都要新增Product後微調程式。
 public IProductRepository Product { get; private set; }
Product = new ProductRepository(_db);

https://ithelp.ithome.com.tw/upload/images/20240917/20147438n2ILMONY3j.png

  • 修改IUnitOfWork
 IProductRepository Product { get; }

https://ithelp.ithome.com.tw/upload/images/20240917/20147438cVJC369HEJ.png

  • Product新增CURD
    1.複製View底下Category資料夾,修改資料夾名稱為Product。
    2.將Product底下的Upsert、Index.cshtml打開,
    選取Category=>Ctrl+Shift+F 用 Product 針對開啟的文件取代即可。
    3.取代完畢後,依照Product的Model修改View。

  • Product/Index.cshtml

<table id="productTbl" class="table">
 <thead>
        <tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Category.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Size)
</th>
<th>
@Html.DisplayNameFor(model => model.Price)
</th>
<th>
@Html.DisplayNameFor(model => model.Description)
</th>
<th>Action</th>
        </tr>
    </thead>
 <td>
@Html.DisplayFor(modelItem => item.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Category.Name)
</td>
<td>
@Html.DisplayFor(modelItem => item.Size)
</td>
<td>
@Html.DisplayFor(modelItem => item.Price)
</td>
<td>
@Html.DisplayFor(modelItem => item.Description)
</td>

https://ithelp.ithome.com.tw/upload/images/20240917/20147438lNgMXUtj8H.jpg


上一篇
Day14 新增產品頁面
下一篇
Day16 新增產品頁面(CRUD)
系列文
asp.net core 分層架構快速上手31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言